/*
 * @Descripttion: app的modal,替换项目原来使用的react-native-modal
 */
import React, { Component } from "react"
import { Modal } from "@ant-design/react-native"
import { View, StyleSheet } from "react-native"

interface ModalProp {
  children: JSX.Element
  visible: boolean
}

const modalStyle = StyleSheet.create({
  container: {
    backgroundColor: "rgba(0,0,0,.5)",
    bottom: 0,
    height: "100%",
    left: 0,
    position: "absolute",
    right: 0,
    top: 0,
    width: "100%"
  }
})

class RNModal extends Component<ModalProp, {}> {
  static defaultProps: {
    visible: boolean
    closable: boolean
    maskClosable: boolean
    style: {}
    bodyStyle: {}
    animationType: string
    onClose(): void
    footer: never[]
    transparent: boolean
    popup: boolean
    animateAppear: boolean
    operation: boolean
  }

  render() {
    return (
      <View style={this.props.visible ? modalStyle.container : {}}>
        <Modal {...this.props}>{this.props.children}</Modal>
      </View>
    )
  }
}

export { RNModal as Modal }
